<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    import { getBannerApi, productListAPIRes } from '@/api'

    const router = useRouter()
    const bannerList = ref<any>([])
    const listData = ref<any>([])

    const getBanner = async () => {
        const { data } = await getBannerApi()
        bannerList.value = data
    }
    const getProductList = async () => {
        const { data } = await productListAPIRes({})
        listData.value = data
    }
    const onToPath = (path?: string) => {
        if (!path) return
        router.push({ path })
    }

    onMounted(() => {
        getBanner()
        getProductList()
    })
</script>

<template>
    <van-swipe :autoplay="5000" :height="150" lazy-render>
        <van-swipe-item v-for="item in bannerList" :key="item.id" @click="onToPath(item.url)">
            <img :src="item.img" />
        </van-swipe-item>
    </van-swipe>
    <div class="flex items-center justify-between p-2.5 border-b border-slate-300 border-dashed text-xs text-[#666]">
        <div><van-icon name="shield-o" :size="14" /> 正规安全</div>
        <div><van-icon name="shield-o" :size="14" /> 平台认证</div>
        <div><van-icon name="shield-o" :size="14" /> 实名认证</div>
        <div><van-icon name="shield-o" :size="14" /> 收费透明</div>
    </div>
    <van-grid v-if="listData.length > 0" :border="false" :center="false" :column-num="2" :gutter="10" class="my-2.5">
        <van-grid-item v-for="item in listData" :key="item.id" :to="`/product/datail?id=${item.id}`" class="product">
            <van-image width="100%" height="7rem" fit="cover" :radius="4" :src="item.productImg">
                <div class="absolute top-0 right-0 px-1 rounded-bl bg-[#38abff] text-xs text-white">{{ item.duration }}分钟</div>
            </van-image>
            <div class="mt-2 text-sm font-bold text-[#232a24]">{{ item.name }}</div>
            <div class="flex items-center justify-between mt-1">
                <div class="text-[#ff2404]">
                    <span class="text-xs">￥</span>
                    <span class="text-sm font-bold">{{ item.price.toFixed(2) }}</span>
                </div>
                <van-button color="#7C6186" size="mini">选择理疗师</van-button>
            </div>
        </van-grid-item>
    </van-grid>
    <van-empty v-else image-size="100" description="暂无数据" />
</template>

<style>
    .product .van-grid-item__content {
        border-radius: 8px;
    }
</style>